<template>
  <div class="upload">
    <div class="main-body">
      <span style="display: block;width: 8%;height: 40px;line-height: 40px;background-color: rgba(240,128,128,0);font-size: 18px;
        text-align: left;margin-left: 4%;margin-top: 1.8%;color: black;font-weight: 600;">上传音频</span>
      <span style="display: block;height: .8px;width: 96%;background-color: #F2F2F2;margin: 0 auto"></span>
      <div style="width: 90%;height: 66%;margin: 0 auto">
        <div style="width: 30%;height: 100%;line-height: 20px;overflow: hidden;display: inline-block">
          <el-upload
              class="upload-demo"
              :http-request="uploadAudio"
              action=""
              :file-list="fileList">
            <el-button size="large" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <div id="chart" style="display: inline-block;width: 70%;height: 100%;overflow:hidden;line-height: 20px;"></div>
      </div>
      <span class="begin" @click="goWork">一键检测</span>
    </div>
  </div>
</template>

<script>
import {request} from "@/api/request";
import ApexCharts from "apexcharts";
export default {
  name: "DetectionUpload",
  data() {
    return {
      org_chart: {},
      active: 1,
      is_success: false,
      wave_data: {},
      uoload_step_status: this.step_status = ["success", "process", "wait"],
      fileList: [{
        name: 'a0001.wav',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'b0002.wav',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      // options: {
      //   series: [],
      //   chart: {
      //     id: 'area-datetime',
      //     type: 'area',
      //     height: 350,
      //     zoom: {
      //       autoScaleYaxis: true
      //     },
      //   },
      //   stroke: {
      //     width: [1.6],
      //   },
      //   dataLabels: {
      //     enabled: false,
      //     formatter: function (val, opts) {
      //       return ""
      //     },
      //   },
      //   xaxis: {
      //     labels: {
      //       show: false
      //     }
      //   },
      //   fill: {
      //     type: 'gradient',
      //     gradient: {
      //       shadeIntensity: 1,
      //       opacityFrom: 0.7,
      //       opacityTo: 0.9,
      //       stops: [0, 100]
      //     }
      //   },
      //   noData: {
      //     text: 'Loading...'
      //   }
      // },
      options: {
        series: [],
        chart: {
          id: 'realtime',
          height: 350,
          type: 'line',
          animations: {
            enabled: true,
            easing: 'linear',
            dynamicAnimation: {
              speed: 1000
            }
          },
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false,
            autoScaleYaxis: false
          }
        },
        dataLabels: {
          enabled: false,
        },
        xaxis: {
          labels: {
            show: false
          },
          crosshairs: {
            show: false,
            position: 'back',
            stroke: {
              color: '#b6b6b6',
              width: 1,
              dashArray: 0,
            },
          },
        },
        yaxis: {
          min: -5000,
          max: 5000
        },
        stroke: {
          width:[1.8],
          curve: 'straight',
          // lineCap: 'butt',
        },
        legend: {
          show: false
        },
        noData: {
          text: "Loading..."
        }
      }
    };
  },
  methods: {
    uploadAudio(file) {
      let that = this;
      let fileReq = new FormData();
      fileReq.append('audio',file.file);
      fileReq.append('username','zzt');

      request({
        method: 'post',
        url: '/audio/upload/',
        data: fileReq
      }).then(res => {
        let code = res.data.code;
        console.log(code);
        if(code == 400) {
          that.$notify.error({
            title: '错误',
            message: '文件上传错误！'
          });
        }
        else if(code == 200) {
          that.wave_data = res.data.wave_data;
          that.is_success = true;
          localStorage.setItem("wave_path",res.data.wave_path);
          console.log(res.data.wave_path);
          that.$notify({
            title: '成功',
            message: '文件上传成功',
            type: 'success'
          });
        }
      }).catch(err => {
        that.$notify.error({
          title: '错误',
          message: '上传音频文件出现异常！'
        });
      })
    },
    goWork() {
      if(!this.is_success) {
        this.$message({
          showClose: true,
          message: '请先上传音频文件',
          type: 'error'
        });
      }
      else this.$router.push('/index/detection/report');
    }
  },
  watch: {
    is_success: {
      handler(old_value,new_value) {
        console.log(this.is_success);
        let slice = 0;
        let charts = this.org_chart;
        let wave = this.wave_data;
        window.setInterval(function () {
          if(slice == 5000) slice=0;
          let dataArr = [];
          for(var i=slice;i<slice+1000;i++)
          {
            dataArr.push(wave[i]);
          }
          slice += 1000;
          charts.updateSeries([{
            data: dataArr
          }])
        }, 1000)
      },
      deep: true
    }
  },
  mounted() {
    this.org_chart = new ApexCharts(
        document.querySelector("#chart"),
        this.options
    );
    this.org_chart.render();
  }
}
</script>

<style scoped>
 * {
   margin: 0;
   padding: 0;
 }
 .main-body {
   overflow: hidden;
   width: 98%;
   height: 600px;
   background-color: white;
   box-shadow: 0 0 10px rgb(82 63 105 / 8%);
   margin: 0 auto;
   margin-top: 20px;
   border-radius: 8px;
 }
 .upload-demo {
   margin-top: 20%;
   text-align: left;
   width: 90%;
   height: 40%;
   margin-left: 15px;
   /*background-color: lightgoldenrodyellow;*/
 }
 /deep/ .el-button {
   width: 80px;
   height: 36px;
   margin-bottom: 12px;
   background-color: #1362FC;
   border-color: #1362FC;
   transition: .3s;
   border-radius: 10px;
   font-size: 12px;
 }
 /deep/ .el-button:hover {
   background-color: #034BD9;
   box-shadow: 0 0 10px rgb(82 63 105 / 8%);
 }
 .begin {
   position: relative;
   display: block;
   z-index: 2;
   width: 120px;
   height: 48px;
   line-height: 48px;
   background-color: #1362FC;
   margin: 0 auto;
   margin-top: 4%;
   color: white;
   border-radius: 16px;
   font-size: 14px;
   letter-spacing: 1px;
   transition: .3s;
 }
 .begin:hover {
   background-color: #034BD9;
   box-shadow: 0 0 10px rgb(82 63 105 / 8%);
 }
</style>